<template>
<div class="modal fade" id="modal-role-list" tabindex="-1" role="dialog" aria-labelledby="modal-role-list-lable" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modal-role-list-lable">管理员</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form class="form-inline" role="form" @submit.prevent="searchRoles(1)">
          <div class="form-group">
            <select v-model="search.platform" class="select2 form-control custom-select">
              <option value="">-平台类型-</option>
              <option v-for="plat in platforms" :key="index" :value="plat.name">{{plat.text}}</option>
            </select>
          </div>
          <div class="form-group">
            <label class="control-label">角色名称：</label>
            <div class="btn-group">
              <input type="text" v-model="search.name" class="form-control" style="width:150px;">
            </div>
          </div>
          <div class="form-group">
            <label class="control-label">角色编码：</label>
            <div class="btn-group">
              <input type="text" v-model="search.code" class="form-control" style="width:150px;">
            </div>
          </div>
          <div class="form-group">
            <label class="control-label">&nbsp;</label>
            <button type="submit" id="search-bt" class="btn btn-primary">查 找</button>
          </div>
        </form>
        <div class="col-12 table-responsive">
          <table class="table table-hover">
            <col width="25%">
            <col width="25%">
            <col width="25%">
            <col width="25%">
            <thead>
              <tr>
                <th>角色名称</th>
                <th>角色编码</th>
                <th>平台类型</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(role, index) in roles" :role="role" :index="index" :key="role.roleId">
                <td>{{role.name}}</td>
                <td>{{role.code}}</td>
                <td>{{platformText(role.platform)}}</td>
                <td>tag</td>
              </tr>
            </tbody>
          </table>
          <div class="col-12">
            <ComPageLink v-bind="paging" v-on:go-page="searchRoles($event)" />
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取 消</button>
        <button type="button" class="btn btn-primary" id="save-btn" v-on:click="saveRole()">提 交</button>
      </div>
    </div>
  </div>
</div>
</template>
<script>
import $ from 'jquery'
import cfg from '../dist/js/config'
import ComPageLink from "./ComPageLink"

import {platforms} from "../dist/js/enum";

// 查询条件
var search = {
	name: "",
	code: "",
	nowPage: 1
}

// 列表数据
var roles = [];

// 分页信息
var paging = {};

function searchRoles(nowPage) {
	if (nowPage) {
		this.search.nowPage = nowPage;
	}
	var setPaging = this.setPaging;
	var setRoles = this.setRoles;
	$.get(cfg.serverPath + "/role/page/0", 
	this.search, 
	function(result) {
		if (result.status != 0) {
			$(document).failMsg(result.message)
			return;
		}
		$(document).hideMsg()
		setPaging(result.data.paging);
		setRoles(result.data.list);
	})
}
function setPaging(paging) {
	this.paging = paging;
}
function setRoles(roles) {
	this.roles = roles;
}

export default {
	props: { isShow: Boolean },
	components: { ComPageLink},
	data() { return { platforms, search, roles, paging } },
	created() { 
		this.searchRoles(); 
	},
	methods: { 
		searchRoles, 
		setPaging, 
		setRoles,
		platformText: function(platform) {
			return platforms[platform].text;
		}
	},
	watch: {
		isShow() {
			$("#modal-role-list").modal(this.isShow ? "show": "hide");
		}
	}
};
</script>